<template>
  <div class="box">
    <Snake :snake="snake" />
    <canvas ref="canvas" width="100%" height="100%"></canvas>
  </div>
</template>

<script>
import Snake from './Snake.vue'

export default {
  components: {
    Snake,
  },
  data() {
    return {
      snake: [],
      direction: 'right',
      moveInterval: null,
      food: '',
    }
  },
  mounted() {
    this.canvas = this.$refs.canvas
    this.context = this.canvas.getContext('2d')
    this.canvas.width = window.innerWidth
    this.canvas.height = window.innerHeight
    this.startGame()

    window.addEventListener('keydown', this.handleKeyDown)
  },
  methods: {
    startGame() {
      this.snake.push({ x: 0, y: 0 })
      this.moveInterval = setInterval(this.moveSnake, 200)
      this.food = this.getRandomFoodPosition()
      this.drawCircle(this.context, this.food.x, this.food.y, 10, 'red')
    },
    // startGame() {
    //   // ...
    //   // 画出第一个食物
    //   this.food = this.getRandomFoodPosition()
    //   this.drawCircle(this.context, this.food.x, this.food.y, 10, 'red')
    // },
    moveSnake() {
      // this.snake = []
      const snakeHead = { ...this.snake[0] }

      switch (this.direction) {
        case 'right':
          snakeHead.x += 20
          break
        case 'left':
          snakeHead.x -= 20
          break
        case 'up':
          snakeHead.y -= 20
          break
        case 'down':
          snakeHead.y += 20
          break
      }

      // 判断是否越界
      if (
        snakeHead.x < 0 ||
        snakeHead.x > window.innerWidth ||
        snakeHead.y < 0 ||
        snakeHead.y > window.innerHeight
      ) {
        clearInterval(this.moveInterval)
        alert('Game over!')
        location.reload()
        return
      }

      // 判断是否碰到了自身
      for (let i = 1; i < this.snake.length; i++) {
        if (
          snakeHead.x === this.snake[i].x &&
          snakeHead.y === this.snake[i].y
        ) {
          clearInterval(this.moveInterval)
          alert('Game over!')
          location.reload()
          return
        }
      }

      // 判断是否吃到了食物
      if (snakeHead.x === this.food.x && snakeHead.y === this.food.y) {
        this.snake.push(this.snake[this.snake.length - 1])
        this.food = this.getRandomFoodPosition()
        //  this.food = this.getRandomFoodPosition()
        this.drawCircle(this.context, this.food.x, this.food.y, 10, 'red')
      }

      // ...
      this.snake.pop()
      this.snake.unshift(snakeHead)
      // ...
    },

    handleKeyDown(event) {
      switch (event.keyCode) {
        case 37:
          if (this.direction !== 'right') this.direction = 'left'
          break
        case 38:
          if (this.direction !== 'down') this.direction = 'up'
          break
        case 39:
          if (this.direction !== 'left') this.direction = 'right'
          break
        case 40:
          if (this.direction !== 'up') this.direction = 'down'
          break
      }
    },
    // ...
    getRandomFoodPosition() {
      return {
        x: Math.floor(Math.random() * 30) * 20,
        y: Math.floor(Math.random() * 20) * 20,
      }
    },
    drawCircle(ctx, x, y, r, color) {
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height) // 清除画布
      ctx.fillStyle = color
      ctx.beginPath()
      ctx.arc(x, y, r, 0, Math.PI * 2, true)
      ctx.fill()
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
canvas {
  border: 1px solid #000;
}
</style>